<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head th:include="include::head"></head>
<body>
    <div class="layui-fluid layui-anim layui-anim-upbit">
        <div>
            <div class="layui-row layui-col-space10">

                <div class="layui-col-sm6 layui-col-md3 ">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            访问量
                            <span class="layui-badge layui-bg-blue layuiadmin-badge">周</span>
                        </div>
                        <div class="md2-sub1">
                            <i class="iconfont icon-user"></i>
                        </div>
                        <div class="md2-sub2">
                            <span class="layuiadmin-big-font">33,555</span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p>
                                总计访问量
                                <span class="layuiadmin-span-color">88万 <i class="layui-icon"></i></span>
                            </p>
                        </div>
                    </div>
                </div>

                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            注册
                            <span class="layui-badge layui-bg-cyan layuiadmin-badge">月</span>
                        </div>
                        <div class="md2-sub1">
                            <i class="iconfont icon-solution"></i>
                        </div>
                        <div class="md2-sub2">
                            <span class="layuiadmin-big-font">33,555</span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p>
                                新注册
                                <span class="layuiadmin-span-color">10% <i class="layui-icon"></i></span>
                            </p>
                        </div>
                    </div>
                </div>

                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            收入
                            <span class="layui-badge layui-bg-green layuiadmin-badge">年</span>
                        </div>
                        <div class="md2-sub1">
                            <i class="iconfont icon-moneycollect"></i>
                        </div>
                        <div class="md2-sub2">
                            <span class="layuiadmin-big-font">33,555</span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p>
                                总收入
                                <span class="layuiadmin-span-color">*** <i class="layui-icon"></i></span>
                            </p>
                        </div>
                    </div>
                </div>

                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            活跃用户
                            <span class="layui-badge layui-bg-orange layuiadmin-badge">月</span>
                        </div>
                        <div class="md2-sub1">
                            <i class="iconfont icon-addteam"></i>
                        </div>
                        <div class="md2-sub2">
                            <span class="layuiadmin-big-font">66,666</span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p>
                                最近一个月
                                <span class="layuiadmin-span-color">15% <i class="layui-icon"></i></span>
                            </p>
                        </div>
                    </div>
                </div>

            </div>
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md8">
                            <div class="layui-row layui-col-space15">

                                <div class="layui-col-md12">
                                    <div class="layui-card layadmin-carousel">
                                        <div class="layui-card-header">公告通知</div>
                                        <div class="layui-carousel" id="notice">
                                            <div carousel-item="">
                                                <th:block th:each="bulletins : ${bulletin}">
                                                    <div class="bulletin-info" th:id="${bulletins.bulletinId}">
                                                        <span th:each="value : ${diy['bulletin_type']}" th:if="${value.dictionaryRoute == bulletins.type}" th:utext="'【'+${value.dictionaryName}+'】'"></span>
                                                        <span th:utext="${bulletins.title}"></span>
                                                    </div>
                                                </th:block>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-col-md12">
                                    <div class="layui-card layadmin-carousel">
                                        <div class="layui-card-header">数据概览</div>
                                        <div class="layui-card-body">
                                            <div class="layui-carousel-ind carousel-ind">
                                                <ul style="padding-right: 20px;">
                                                    <li class="layui-this"></li>
                                                    <li class=""></li>
                                                    <li class=""></li>
                                                </ul>
                                            </div>
                                            <div id="container" style="height:350px;"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-col-md12">
                                    <div class="layui-card">
                                        <div class="layui-card-header">Jelly新闻</div>
                                        <div class="layui-card-body">
                                            <dl>
                                                <dd class="layui-text"><i class="layui-icon layui-icon-fire"></i>（置顶）号外！《坐骑天下》精美壁纸发布<span>2018-11-5</span></dd>
                                                <dd class="layui-text"><i class="layui-icon layui-icon-fire"></i>（置顶）锦绣川英雄会精锐状元血耐DF纪念属性<span>2018-11-5</span></dd>
                                                <dd class="layui-text"><i class="layui-icon layui-icon-fire"></i>（置顶）三河集155龙宫″鼾鼾猪°部分宝宝展示<span>2018-11-5</span></dd>
                                                <dd class="layui-text"><i class="layui-icon layui-icon-fire"></i>（置顶）打击盗号卖赃战果显著 7月没收赃款21亿<span>2018-11-5</span></dd>
                                                <dd class="layui-text"><i class="layui-icon layui-icon-fire"></i>（置顶）商城个性定制商品隆重推出 快来选购！<span>2018-11-5</span></dd>
                                                <dd class="layui-text"><i class="layui-icon layui-icon-fire"></i>（置顶）钻石对戒获奖玩家名单来啦<span>2018-11-5</span></dd>
                                                <dd class="layui-text"><i class="layui-icon layui-icon-fire"></i>（置顶）三河集第一五庄观属性图部分装备展示<span>2018-11-5</span></dd>
                                            </dl>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="layui-row layui-col-space15">
                                <div class="layui-col-md12">
                                    <div class="layui-card">
                                        <div class="layui-card-header">版本信息</div>
                                        <div class="layui-card-body">
                                            <table class="layui-table">
                                                <colgroup>
                                                    <col width="150">
                                                    <col>
                                                </colgroup>
                                                <tbody>
                                                <tr>
                                                    <td>当前版本</td>
                                                    <td>v1.0.0-jelly</td>
                                                </tr>
                                                <tr>
                                                    <td>框架</td>
                                                    <td>spingboot shiro redis</td>
                                                </tr>
                                                <tr>
                                                    <td>作者</td>
                                                    <td>QL</td>
                                                </tr>
                                                <tr>
                                                    <td>邮箱</td>
                                                    <td>1224999091@qq.com</td>
                                                </tr>
                                                <tr>
                                                    <td>源码下载</td>
                                                    <td>gitee.com/super-admin/jelly</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-col-md12 ">
                                    <div class="layui-card">
                                        <div class="layui-card-header">效果报告</div>
                                        <div class="layui-card-body layadmin-takerates">
                                            <div class="layui-progress" lay-showpercent="true">
                                                <h3>转化率（日同比 28% <span class="layui-edge layui-edge-top" lay-tips="增长" lay-offset="-15"></span>）</h3>
                                                <div class="layui-progress-bar" lay-percent="56%"></div>
                                            </div>
                                            <div class="layui-progress" lay-showpercent="true">
                                                <h3>签到率（日同比 11% <span class="layui-edge layui-edge-bottom" lay-tips="下降" lay-offset="-15"></span>）</h3>
                                                <div class="layui-progress-bar layui-bg-red" lay-percent="30%"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-col-md12">
                                    <div class="layui-card">
                                        <div class="layui-card-header">更新日志</div>
                                        <div class="layui-card-body">
                                            <ul class="layui-timeline">
                                                <li class="layui-timeline-item">
                                                    <i class="layui-icon layui-timeline-axis"></i>
                                                    <div class="layui-timeline-content layui-text">
                                                        <div class="layui-timeline-title">2018年10月，Jelly 1.0 发布。并发展成为中国最受欢迎的后台框架（期望）</div>
                                                    </div>
                                                </li>
                                                <li class="layui-timeline-item">
                                                    <i class="layui-icon layui-timeline-axis"></i>
                                                    <div class="layui-timeline-content layui-text">
                                                        <div class="layui-timeline-title">2018年9月，Jelly 里程碑版本</div>
                                                    </div>
                                                </li>
                                                <li class="layui-timeline-item">
                                                    <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
                                                    <div class="layui-timeline-content layui-text">
                                                        <div class="layui-timeline-title">Jelly 后台管理破蛋出壳。</div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div th:include="include::onload"></div>

    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('container'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '堆叠区域图',
                x:'center',
                textStyle: {
                    fontFamily: 'Arial, Verdana, sans...',
                    fontStyle: 'normal',
                    fontWeight: 'normal'
                }
            },
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                x: 'right',
                data:['视频广告','直接访问','搜索引擎']
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : ['周一','周二','周三','周四','周五','周六','周日']
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'视频广告',
                    type:'line',
                    stack: '总量',
                    areaStyle: {},
                    data:[150, 232, 201, 154, 190, 330, 410],
                    smooth: true
                },
                {
                    name:'直接访问',
                    type:'line',
                    stack: '总量',
                    areaStyle: {normal: {}},
                    data:[320, 332, 301, 334, 390, 330, 320]
                    ,smooth: true
                },
                {
                    name:'搜索引擎',
                    type:'line',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    areaStyle: {normal: {}},
                    data:[820, 932, 901, 934, 1290, 1330, 1320]
                    ,smooth: true
                }
            ]
        };

        var options = {
            title : {
                text: '用户访问来源',
                x:'center',
                textStyle: {
                    fontFamily: 'Arial, Verdana, sans...',
                    fontStyle: 'normal',
                    fontWeight: 'normal'
                }
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1548, name:'搜索引擎'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        var optionss = {
            title: {
                text: '折线图堆叠',
                x:'center',
                textStyle: {
                    fontFamily: 'Arial, Verdana, sans...',
                    fontStyle: 'normal',
                    fontWeight: 'normal'
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name:'邮件营销',
                type:'line',
                stack: '总量',
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                smooth: true
            }]
        };

        myChart.setOption(option);

        $(".carousel-ind li").mouseover(function(){
            var bol = $(this).attr("class-type");
            $(".carousel-ind li").attr("class","");
            $(".carousel-ind li").attr("class-type","");
            $(this).attr("class","layui-this");
            $(this).attr("class-type","layui-this");

            if(bol){
                return;
            }

            var index = $(".carousel-ind ul li").index(this);
            myChart.clear();
            if(index == 1){
                myChart.setOption(options);
            }else if(index == 0){
                myChart.setOption(option);
            }else{
                myChart.setOption(optionss);
            }

        });

        $('.bulletin-info').click(function () {
            Layer.openDialog("公告详情","/admin/basics/bulletin/info?id="+$(this).attr('id'));
        });

        layui.use(['carousel'], function(){
            var carousel = layui.carousel;
            //改变下时间间隔、动画类型、高度
            carousel.render({
                elem: '#notice'
                ,width: 'auto'
                ,height: '100px'
                ,interval: 4000
            });
        });

    </script>
    </body>
</html>